/**
 * @author wn
 * @date 2022/07/15 11:06:35
 * @description: 该函数 可以  显示 xtx-message 组件  3秒消失
 * 1 直接导入使用
 * import Message from 'XXX/message.js'
 * Message({type:'error',message:'用户名错误'})
 *
 * 2 挂载在 vue 实例上
 * 在 index--install(app)--中 挂载
 * const { proxy } = getCurrentInstance()
 * proxy.$message({type:'error',message:'用户名错误'})
 *
 * createVNode(XtxMessage, obj)===h(XtxMessage, obj)===jsX<组件/>-->创建的是 虚拟DOM
 * render()-->渲染到页面后,vNode.el 属性可以看到真的的 DOM===document.XXX
 *
 * 总结 创建真实DOM 作为容器 render(虚拟节点,容器)
 */

// 1导入消息提示组件
import { render } from 'vue'
import XtxMessage from './XtxMessage'

// 3 准备一个 容器  函数外 只创建一次即可
/* const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div) */

// 3 jsX 写法
const vDiv = <div class="xtx-message-container"></div>
render(vDiv, document.body)
// 定时器
let timer = null
export default ({ type, message }) => {
	// 2 将该组件 编译为虚拟节点--vue文件编译为虚拟节点
	// createVNode(组件，属性对象)
	/* const vNode = createVNode(XtxMessage, obj) */

	// 2 jsX {取值}
	const vNode = <XtxMessage type={type} message={message}></XtxMessage>
	// 4 将虚拟节点渲染到容器中
	// render(虚拟节点，容器 DOM)
	/* render(vNode, div) */
	render(vNode, vDiv.el)
	// 首先清除 定时器
	clearTimeout(timer)
	// 清除 div 内节点  就不会显示
	timer = setTimeout(() => render(null, vDiv.el), 3 * 1000)
}
